import React from "react";
import { ListRowState } from "../../types";

interface PropsType extends ListRowState {
  onClick?: () => void
  count?: number 
}

export const ListItem: React.FC<PropsType> = (props) => {

  const { id, title, word, image, price, onClick, count } = props;
	
  return (
    <dl key={id} onClick={ onClick }>
      <dt>
        <img src={image} alt="" />
      </dt>
      <dd>
        <h3>{title}</h3>
        <p>{word}</p>
        <p style={{ color: "red", display: 'flex', justifyContent: 'space-between' }}>
          <span>￥：{price}</span>
          { count ? <span>x{ count }</span> : '' }
        </p>
      </dd>
    </dl>
  );
};
